<template>
    <view class="comment">
        <view v-if="commentList.length">
            <view class="card" v-for="item in commentList" :key="item.id">
                <view class="user">
                    <view class="profile">
                        <image src="@/static/images/mine/missing-face.png" />
                    </view>
                    <view class="user_name">
                        <view class="name">匿名用户</view>
                        <up-rate v-model="item.serverPoint" active-color="#FFB200" inactiveIcon="star-fill"
                            inactive-color="#F1F1F1" gutter="5" readonly></up-rate>
                    </view>
                </view>
                <view class="serve">
                    {{  `服务 ${item.serverPoint}；${initTimePoint(item.timePoint)}；工作成果 ${initWorkPoint(item.workPoint)}` }}
                </view>
                <view class="content">
                    {{ item.comment }}
                </view>
                <view class="time">发布于 {{ getTime(item.createTime as number) }}</view>
            </view>
        </view>
        <up-empty mode="data" marginTop="220" v-else></up-empty>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCommentOne, getCommentPageByWorker } from "@/api/other/comment";
import type { Comment } from '@/types/other';
import { getTime } from "@/utils";

onLoad((options:any) => {
    const {workUserId, orderId} = options
    if(workUserId){
        // 查询师傅评价
        getCommentList(workUserId)
    }
    if(orderId){
        // 查询订单评价
        getComment(orderId)
    }
})

const timeRadiolist = [
    { name: "", value: 0 },
    { name: "提前", value: 1 },
    { name: "按时", value: 2 },
    { name: "迟到", value: 3 }
]
const initTimePoint = ((timePoint:number = 1)=>{
    if(timePoint){
        return timeRadiolist[timePoint].name
    }else{
        return ""
    }
})
const workRadiolist = [
    { name: "", value: 0 },
    { name: "很好", value: 1 },
    { name: "一般", value: 2 },
    { name: "差", value: 3 },
    { name: "很差", value: 4 }
]
const initWorkPoint = ((workPoint:number = 1)=>{
    if(workPoint){
        return workRadiolist[workPoint].name
    }else{
        return ""
    }
})

const commentList = ref<Comment[]>([])
// 根据师傅id获取评价列表
const getCommentList = (workUserId: string) => {
    getCommentPageByWorker(workUserId).then((res: any) => {
        if (res.code == 0 && res.data) {
            commentList.value = res.data.list
        }
    })
}
// 根据订单id查询评价
const getComment = (orderId: string) => {
    getCommentOne(orderId).then((res: any) => {
        if (res.code == 0 && res.data) {
            commentList.value.push(res.data)
       }
    })
}
</script>

<style lang="scss" scoped>
.comment {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.card {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
}

.user {
    width: 100%;
    display: flex;

    .profile {
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;

        image {
            width: 84rpx;
            height: 84rpx;
            border-radius: 50%;
        }
    }

    .user_name {
        margin-left: 16rpx;

        .name {
            font-weight: 700;
            font-size: 30rpx;
            color: #222222;
        }
    }
}

.serve {
    font-size: 24rpx;
    color: #888888;
    margin-top: 16rpx;
}

.content {
    font-size: 26rpx;
    color: #222222;
    margin-top: 24rpx;
}

.time {
    font-size: 24rpx;
    color: #888888;
    margin-top: 40rpx;
}
</style>